<script setup>
import { addMenu, deletMenu, updateMenuApi, findTree } from '@/api/system/menu'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import AddMenu from './components/AddMenu.vue'

const loading = ref(false)
const addMenuRef = ref(null)
const pageData = reactive({
  isShowAddDialog: false,
  editingId: '',
  parentId: '',
  menuType: '' // TOP_MENU、MENU、CATALOG、BUTTON
})

// 菜单类型 1目录 2菜单 3按钮
const parseType = (val) => {
  const typeMap = {
    1: '目录',
    2: '菜单',
    3: '按钮'
  }
  return typeMap[val]
}

const toAddTopMenu = () => {
  pageData.editingId = ''
  pageData.isShowAddDialog = true
  pageData.menuType = 'TOP_MENU'
}

const handleCreate = (row) => {
  pageData.editingId = ''
  pageData.parentId = row._id
  pageData.menuType = 'MENU'
  pageData.isShowAddDialog = true
}

const handleUpdate = (row) => {
  pageData.editingId = row._id
  if (row.parentId === '0') {
    pageData.menuType = 'TOP_MENU'
  } else {
    pageData.menuType = 'MENU'
  }
  pageData.isShowAddDialog = true
}

const handleDelete = (row) => {
  ElMessageBox.confirm(`正在删除：${row.name}，确认删除？`, 'Warning', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    deletMenu(row._id).then(() => {
      ElMessage.success('删除成功')
      getTableData()
    })
  })
}

const createMenu = (record) => {
  addMenu(record)
    .then(() => {
      ElMessage.success('新增成功')
      pageData.isShowAddDialog = false
      getTableData()
    })
    .finally(() => {
      addMenuRef.value.submitBtnLoading = false
    })
}

const updateMenu = (record) => {
  updateMenuApi(record)
    .then(() => {
      ElMessage.success('修改成功')
      pageData.isShowAddDialog = false
      getTableData()
    })
    .finally(() => {
      addMenuRef.value.submitBtnLoading = false
    })
}

const tableData = ref([])
const getTableData = () => {
  loading.value = true
  findTree()
    .then((res) => {
      tableData.value = res.data
    })
    .catch(() => {
      tableData.value = []
    })
    .finally(() => {
      loading.value = false
    })
}

getTableData()
</script>

<template>
  <div class="app-container">
    <div v-loading="loading" shadow="never">
      <el-card>
        <div class="toolbar-wrapper">
          <div>
            <el-button type="primary" plain :icon="Plus" @click="toAddTopMenu">新增顶级菜单</el-button>
          </div>
        </div>
      </el-card>
      <el-card class="mt-4">
        <div class="table-wrapper">
          <el-table :data="tableData" row-key="_id" default-expand-all max-height="75vh">
            <el-table-column prop="name" label="菜单名称" />
            <el-table-column prop="type" label="菜单类型" align="center">
              <template #default="scope">
                <span v-if="scope.row.type == 'CATALOG'">目录</span>
                <span v-if="scope.row.type == 'MENU'">菜单</span>
              </template>
            </el-table-column>
            <el-table-column prop="sort" label="显示顺序" align="center" />
            <el-table-column prop="permissionChar" label="权限字符" align="center" />
            <el-table-column fixed="right" label="操作" width="220" align="center">
              <template #default="scope">
                <el-button type="primary" text bg size="small" @click="handleCreate(scope.row)">新增</el-button>
                <el-button type="primary" text bg size="small" @click="handleUpdate(scope.row)">修改</el-button>
                <el-button type="danger" text bg size="small" @click="handleDelete(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-card>
    </div>
    <AddMenu
      ref="addMenuRef"
      v-model:visible="pageData.isShowAddDialog"
      :id="pageData.editingId"
      :parentId="pageData.parentId"
      :menuType="pageData.menuType"
      @create="createMenu"
      @update="updateMenu"
    />
  </div>
</template>

<style lang="scss" scoped>
.search-wrapper {
  :deep(.el-card__body) {
    padding-bottom: 2px;
  }
}

.toolbar-wrapper {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  :deep(.el-button) {
    padding: 6px 12px;
  }
}

.table-wrapper {
  margin-bottom: 20px;
}
</style>
